<template>
	<view class="content">
		<view class="top"> 根据您每个任务的工作质量，行为规范等，进行分数分层，不同评分对应不用的处罚，当评分落入对应分数层即会触发处罚，需按照恢复分值机制恢复扣分值。 </view>
		<view class="part1">
			<view class="title"> 一、评分权益 </view>
			<!-- <table border="1" height="100%" width="100%" cellspacing="0" align="center">
				<thead>
					<tr>
						<th>分值区</th>
						<th>触犯处罚</th>
						<th>分数恢复机制</th>
					</tr>
				</thead>
				<tbody align="center">
					<tr>
						<td>60-100分</td>
						<td>正常接单</td>
						<td>连续完成3单加{{rules.continuous}}分/好评1个加{{rules.favorable_comment}}分</td>
					</tr>
					<tr>
						<td>40-59分</td>
						<td>不可接单</td>
						<td>每日恢复{{rules.lowRange}}分 <span>/需立即回暖恢复到60分</span></td>
					</tr>
					<tr>
						<td>1-39分</td>
						<td>不可接单</td>
						<td>每日恢复{{rules.mediumRange}}分 <span>/可加速回暖每日恢复{{rules.accelerated}}分</span> </td>
					</tr>
					<tr>
						<td>0分</td>
						<td>封禁60天</td>
						<td>不可恢复分值</td>
					</tr>
				</tbody>
			</table> -->
			<view class="table">
				<view class="tab_th">
					<view class="th_td1 th_text" style="font-weight: bold;"><text>分值区</text></view>
					<view class="th_td2 th_text" style="font-weight: bold;"><text>触犯处罚</text></view>
					<view class="th_td3 th_text" style="font-weight: bold;"><text>分数恢复机制</text></view>
				</view>
				<block>
					<view class="tab_tr">
						<view class="tr_td1 text"><text>60-100分</text></view>
						<view class="tr_td2 text"><text>正常接单</text></view>
						<view class="tr_td3 text3">
							<text>连续完成3单加{{rules.continuous}}分/好评1个加{{rules.favorable_comment}}分</text>
						</view>
					</view>
					<view class="tab_tr">
						<view class="tr_td1 text"><text>40-59分</text></view>
						<view class="tr_td2 text"><text>不可接单</text></view>
						<view class="tr_td3 text3"><text>每日恢复{{rules.lowRange}}分/需立即回暖恢复到60分</text></view>
					</view>
					<view class="tab_tr">
						<view class="tr_td1 text"><text>1-39分</text></view>
						<view class="tr_td2 text"><text>不可接单</text></view>
						<view class="tr_td3 text3"><text>每日恢复{{rules.mediumRange}}分/可加速回暖每日恢复{{rules.accelerated}}分</text></view>
					</view>
					<view class="tab_tr">
						<view class="tr_td1 text"><text>0分</text></view>
						<view class="tr_td2 text"><text>封禁60天</text></view>
						<view class="tr_td3 text3"><text>不可恢复分值</text></view>
					</view>
				</block>
			</view>
			<view class="description"> 规则说明：<br> 1. <span style="color: #000">初始分值为100分，</span>
				根据实时产生扣罚分值，更新评分，分值都是实时生效。<br> 2.解决办法：按照分数恢复机制进行，分值会及时返还。最高分值为100分。<br>
			</view>
		</view>
		<view class="part2">
			<view class="title">二、扣分规则 </view>
			<view class="little-title"> （1）各项扣分规则 </view>
			<!-- <table border="1" height="100%" width="100%" cellspacing="0" align="center">
				<thead>
					<tr>
						<th>扣分事项</th>
						<th>扣分分值</th>
					</tr>
				</thead>
				<tbody align="center">
					<tr v-for="item in subArr">
						<td>{{item.name}}</td>
						<td>{{item.value}}</td>
					</tr>
				</tbody>
			</table> -->
			<view class="table2">
				<view class="tab_th">
					<view class="th_td1 th_text" style="font-weight: bold;"><text>分值区</text></view>
					<view class="th_td2 th_text" style="font-weight: bold;"><text>触犯处罚</text></view>
				</view>
				<block>
					<view class="tab_tr" v-for="item in subArr">
						<view class="tr_td1 text"><text>{{item.name}}</text></view>
						<view class="tr_td2 text"><text>{{item.value}}</text></view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				addArr: [],
				subArr: [],
				rules: {},
			};
		},
		methods: {
			async getRule() {
				let res = await this.$fetch(this.$api.get_scoring_rules, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log(res)
				this.rules = res.data
				console.log(res.data.scoreSub)
				for (let j in Object.keys(res.data.scoreSub)) {
					let x = {};
					x['name'] = Object.keys(res.data.scoreSub)[j];
					x['value'] = Object.values(res.data.scoreSub)[j];
					this.subArr.push(x)
				}
			}
		},
		onShow() {
			this.getRule()
		}
	}
</script>
<style lang="less" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		height: 100%;
		background: #fff;
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		line-height: 48rpx;
		font-size: 32rpx;
		color: #515151;

		.part1 {
			margin-top: 60rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #262626;
				margin-bottom: 30rpx;
			}

			.description {
				margin-top: 30rpx;
			}
		}

		.part2 {
			margin-top: 60rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #262626;
				margin-bottom: 30rpx;
			}

			.little-title {
				font-size: 32rpx;
				color: #262626;
				font-weight: bold;
				margin-bottom: 20rpx;
				margin-top: 30rpx;
			}
		}

		.table {
			width: 100%;
			border: #707070 solid 1px;
			position: relative;
			left: 1%;
			text-align: center;
		}

		.tab_th {
			width: 100%;
			position: relative;
			height: 120rpx;
			border-top: #707070 solid 1px;
			border-bottom: #707070 solid 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #262626;
		}

		.th_td1 {
			width: 25%;
			height: 120rpx;
			border-top: #707070 solid 1px;
			border-bottom: #707070 solid 1px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.th_td2 {
			width: 25%;
			height: 120rpx;
			border: 1px solid #707070;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.th_td3 {
			width: 50%;
			height: 120rpx;
			border: 1px solid #707070;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tab_tr {
			width: 100%;
			position: relative;
			height: 120rpx;
			border-top: #707070 solid 1px;
			border-bottom: #707070 solid 1px;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tr_td1 {
			width: 25%;
			height: 120rpx;
			border-top: #707070 solid 1px;
			border-bottom: #707070 solid 1px;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tr_td2 {
			width: 25%;
			height: 120rpx;
			border: 1px solid #707070;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tr_td3 {
			width: 50%;
			height: 120rpx;
			border: 1px solid#707070;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFangHK-Regular, PingFangHK;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 17px;
		}

		.text3 {
			font-size: 28rpx;
			font-family: PingFangHK-Regular, PingFangHK;
			font-weight: 400;
			line-height: 17px;
			color: #FF851D;
		}

		.th_text {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 22px;
		}
	}

	.table2 {
		width: 100%;
		border: #707070 solid 1px;
		position: relative;
		left: 1%;

		.tab_th {
			width: 100%;
			position: relative;
			height: 120rpx;
			border-top: #707070 solid 1px;
			border-bottom: #707070 solid 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #262626;

			.th_td1 {
				width: 50%;
				height: 120rpx;
				border-top: #707070 solid 1px;
				border-bottom: #707070 solid 1px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.th_td2 {
				width: 50%;
				height: 120rpx;
				border: 1px solid #707070;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.tab_tr {
			width: 100%;
			position: relative;
			height: 120rpx;
			border-top: #707070 solid 1px;
			border-bottom: #707070 solid 1px;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.tr_td1 {
				width: 50%;
				height: 120rpx;
				border-top: #707070 solid 1px;
				border-bottom: #707070 solid 1px;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tr_td2 {
				width: 50%;
				height: 120rpx;
				border: 1px solid #707070;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>